<template>
  <!-- 月卡 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="月卡" width="60%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <page-details ref="baseForm" :data="data"/>
      <el-form ref="activityForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}
          </div>
          <div class="content width80" style="padding:0;">
            <!-- 基础配置 -->
            <div class="item-clear" v-show="item.key=='basics'" style="height:auto;">
              <div class="flex border-item marginB20" v-for="(second,two) in rewardData" :key="two">
                <div class="btn-box-add marginR5">
                  <el-tooltip content="新增月卡配置" v-show="rewardIndex==two">
                    <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addReward" />
                  </el-tooltip>
                </div>
                <div style="height:auto;">
                  <div class="flex">
                    <div class="title flex marginR10">
                      <span class="width60px">备注:</span>
                      <el-form-item class="item-clear" label="">
                        <el-input class="width120" type="text" v-model="second.remark" clearable placeholder="请输入备注"/>
                      </el-form-item>
                    </div>
                    <div class="title flex marginR10">
                      <span class="width130">立刻获得卢比数:</span>
                      <el-form-item class="item-clear" label="">
                        <el-input-number class="width150" :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.soonReward" controls-position="right" clearable placeholder="请输入立刻获得卢比数"/>
                      </el-form-item>
                    </div>
                    <div class="title flex">
                      <span class="width130">邀请充值返利:</span>
                      <el-form-item class="item-clear" label="">
                        <el-input-number class="width120" :min="0" :max="100" :precision="0" :controls="false" v-model="second.rebateRatioReward" controls-position="right" clearable placeholder="请输入邀请充值返利"/>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="title flex marginR10">
                      <span class="width150">每日奖励补发标题:</span>
                      <el-form-item class="item-clear" label="">
                        <el-input-number :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.dailyMailI18nT" controls-position="right" clearable placeholder="请输入每日奖励补分标题"/>
                      </el-form-item>
                    </div>
                    <div class="title flex marginR10">
                      <span class="width150">每日奖励补发内容:</span>
                      <el-form-item class="item-clear" label="">
                        <el-input-number :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.dailyMailI18nC" controls-position="right" clearable placeholder="请输入每日奖励补分内容"/>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="title flex marginR10">
                      <span class="width150">邀请返利标题:</span>
                      <el-form-item class="item-clear" label="">
                        <el-input-number :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.rebateMailI18nT" controls-position="right" clearable placeholder="请输入邀请返利标题"/>
                      </el-form-item>
                    </div>
                    <div class="title flex marginR10">
                      <span class="width150">邀请返利内容:</span>
                      <el-form-item class="item-clear" label="">
                        <el-input-number :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.rebateMailI18nC" controls-position="right" clearable placeholder="请输入邀请返利内容"/>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="title flex marginR10">
                    <span class="width150">选择商品:</span>
                    <el-form-item class="item-clear" label="">
                      <el-select v-model="second.goodsId" placeholder="请选择商品" >
                        <el-option v-show="third.activity_type==17 && third.goods_type==1" :label="'【'+third.value+'】'+third.label" :value="third.value" v-for="(third, three) in goodDataArray" :key="three"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="title" style="height:auto;">
                    <span class="width55">每天领取:</span>
                    <div class="flex" v-for="(third,three) in second.reward" :key="three">
                      <div class="btn-box-add" style="margin-top:0;">
                        <el-tooltip content="新增奖励配置" v-show="second.rewIndex==three">
                          <el-button class="marginL10" size="mini" type="success" circle icon="el-icon-plus" @click="addRew(two)" />
                        </el-tooltip>
                      </div>
                      <el-form-item class="item-clear" label="Min:" label-width="50px">
                        <el-input-number class="width120 marginR5" :min="0" :max="10000" :precision="0" :controls="false" v-model="third.startDay" controls-position="right" clearable placeholder="请输入起始天数"/>
                      </el-form-item>
                        —
                      <el-form-item class="item-clear" label="Max:" label-width="50px">
                        <el-input-number class="width120" :min="0" :max="10000" :precision="0" :controls="false" v-model="third.endDay" controls-position="right" clearable placeholder="请输入结束天数"/>
                      </el-form-item>
                      <el-form-item class="item-clear" label="奖励:" label-width="50px">
                        <el-input-number class="width150" :min="0" :max="999999999999" :precision="0" :controls="false" v-model="third.num" controls-position="right" clearable placeholder="请输入获取的奖励"/>
                      </el-form-item>
                      <div class="btn-box-delete" label-width="60px">
                        <el-tooltip content="删除奖励配置" v-show="second.reward.length != 1">
                          <el-button class="marginL10" size="mini" type="warning" circle icon="el-icon-minus" @click="deleteRew(two,three)" />
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="btn-box-delete" label-width="60px">
                  <el-tooltip content="删除月卡配置" v-show="rewardData.length != 1">
                    <el-button class="marginL10" size="mini" type="danger" circle icon="el-icon-minus" @click="deleteReward(two)" />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('activityForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addActivity,
  editActivity
} from "@/api/activity";

import PageDetails from '../page-details.vue'
export default {
  components: {
    PageDetails,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    goodDataArray: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.goodDataArray
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData: [
        { label: '基础配置', key: 'basics' },
      ],
      formParams:{},
      ruleForm: {},
      rewardData:[
        {remark:'',dailyMailI18nT:null,dailyMailI18nC:null,rebateMailI18nT:null,rebateMailI18nC:null,rebateRatioReward:0,soonReward:0,subId:'',goodsId:'',
        reward:[{startDay:0,endDay:0,itemType:1,num:0}],rewIndex:0}
      ],
      rewardIndex:0,
      rechargeInfo:[]
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        that.rewardData=that.formParams.parameter
      } else {
        that.formParams = {}
        that.rewardData = [
          {remark:'',dailyMailI18nT:null,dailyMailI18nC:null,rebateMailI18nT:null,rebateMailI18nC:null,rebateRatioReward:0,soonReward:0,subId:'',goodsId:'',
          reward:[{startDay:0,endDay:0,itemType:1,num:0}],rewIndex:0}
        ],
        that.rewardIndex=0,
        that.rechargeInfo=[]
      }
    }
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm (formvalue) {
      if(!this.$refs.baseForm.handleConfirm()){
        return false
      }
      let that = this,parameter = JSON.parse(JSON.stringify(that.formParams)),
      params = JSON.parse(JSON.stringify(this.$refs.baseForm.handleConfirm()));
      that.rechargeInfo=[]
      params.activity_type = 17
      parameter.other=[]
      // 商品信息
      parameter.other=JSON.parse(JSON.stringify(that.rewardData))
      parameter.other.map((item,index)=>{
        item.subId=index
        item.soonReward=that.$public.mathNumberMultiply(item.soonReward,10000)
        that.rechargeInfo.push({goods_id:item.goodsId,sub_id:index})
        // 奖励
        item.reward.map(second=>{
          second.num=that.$public.mathNumberMultiply(second.num,10000)
        })
      })
      params.recharge_info=that.rechargeInfo
      // 活动信息
      params.other=JSON.stringify(parameter.other)
      that.$refs[formvalue].validate((valid) => { 
        if (valid) {
          if(params.id){
            editActivity(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }else{
            addActivity(params).then((res)=> {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        }
      })
    },
    // 新增大奖
    addReward(){
      this.rewardIndex++
      this.rewardData.push({remark:'',dailyMailI18nT:null,dailyMailI18nC:null,rebateMailI18nT:null,rebateMailI18nC:null,rebateRatioReward:0,soonReward:0,subId:'',goodsId:'',
      reward:[{startDay:0,endDay:0,itemType:1,num:0}],rewIndex:0})
    },
    // 删除大奖
    deleteReward(index){
      this.rewardIndex--
      this.rewardData.splice(index,1,)
    },
    // 新增大奖
    addRew(index){
      this.rewardData[index].rewIndex++
      this.rewardData[index].reward.push({startDay:0,endDay:0,itemType:1,num:0})
    },
    // 删除大奖
    deleteRew(index,two){
      this.rewardData[index].rewIndex--
      this.rewardData[index].reward.splice(two,1,)
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.btn-box-add{
  width: 50px;
  text-align: center;
  margin-top: -20px;
  margin-left: -10px;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
</style>
